<!-- TrainSubmitUserInfo.html -->
<!DOCTYPE html>
<html class="base_gary_bg_color">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>新增调查题目页</title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
    <!--<link rel="stylesheet" type="text/css" href="../../css/jquery-weui.min.css">-->
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
    <link rel="stylesheet" href="../../css/swiper-3.4.2.min.css">
    <style type="text/css" media="screen">
        .base_right_item {
            color: white;
        }

        a:active {
            color: #d9d9d9;
        }

        .mui-btn-blue {
            border: 1px solid #18b4ed;
            background-color: #18b4ed;
        }


        .qusetionTypeDiv {
        }

        .width_10 {
            width: 10px;
        }

        .width_20 {
            width: 20px;
        }

        .mui-input-group .mui-input-row label {
            font-family: 'Helvetica Neue', Helvetica, sans-serif;
            line-height: 1.1;
            float: left;
            width: 15%;
            padding: 11px 15px;
        }

        .mui-input-group .mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~
        textarea {
            float: right;
            width: 85%;
            margin-bottom: 0;
            padding-left: 0;
            border: 0;
        }

        .head-div .mui-input-row label {
            font-family: 'Helvetica Neue', Helvetica, sans-serif;
            line-height: 1.1;
            width: 55%;
            padding: 11px 39px;
        }

        .head-div .mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~
        textarea {
            float: right;
            width: 45%;
            margin-bottom: 0;
            padding-left: 0;
            border: 0;
        }

        .head-div input {
            font-family: 'Helvetica Neue', Helvetica, sans-serif;
            line-height: 1.1;
            width: 55%;
            border: 0px;
            padding: 11px 39px;
        }

        .head-div .mui-input-row {
            height: 40px;
        }

        .jiantoudiv {
            background: url(../../icon/danxuan.png) no-repeat 6% 50%;
            background-size: 16px 16px;
            font-size: 16px;
        }

        .mui-btn-warning:enabled:active {
            color: #fff;
            border: 1px solid #18b4ed;
            background-color: #18b4ed;
        }

        .mui-btn-warning, .mui-btn-yellow {
            color: #fff;
            border: 1px solid #18b4ed;
        }

        .course_select_footer {
            width: 100%;
            height: 8%;
            position: fixed;
            bottom: 0;
            left: 0;
        }

        .next_btn {
            width: 92%;
            height: 67%;
            font-size: 16px;
            background: url(../../icon/add_research.png) no-repeat 33% 50%;
            background-size: 20px 20px;
            background-color: #18b4ed;
        }

        .btn_submit2 {
            width: 92%;
            height: 67%;
            font-size: 16px;
            border: 1px solid #18b4ed;
        }

        .swiper-wrapper {
            min-height: 400px
        }

        .quetion_tilte {
            margin-top: 2px;
        }
    </style>
</head>
<body class="base_gary_bg_color">
<div class="base_style_color " id='BarAppearance'></div>
<div class="base_navigation_bar base_style_color base_navigation_item_bar">
    <a class="base_left_item  nav-item" href="#" onclick="backToast()" style="line-height:44px;color: #fff;"> 取消 </a>
    <span id="newsTitle">创建问题</span>
    <a class="base_right_item nav-item" style="line-height: 44px" onclick="completeData()"> 完成 </a>
</div>
<div class="base_content_div base_content_font">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!--<div class="swiper-slide" id="slide1">-->
            <!--	<div class="head-div">
            <div class="mui-input-row " style="background: #FFF;" onclick="StartPopu()">
            <label class="jiantoudiv" id="item_type">单选</label>
            <div style="float: right;padding: 10px 16px;" ><img class="width_20" id="type_img" src="../../icon/jiantouxia.png"/>
            </div>
            </div>
            </div>-->
            <!--	<form class="mui-input-group" style="background: #F0F0F0" id="question_div">
            <div class="mui-input-row">
            <label class="" >Q1:</label>
            <input id="" class="right_aligned_input base_content_font base_dark_grey" type="text" value="" placeholder="请输入问题" >
            </div>
            <div id="item_div1">
            <div class="mui-input-row " id="item1">
            <label class="base_grey"><img class="width_20" id="type_img" src="../../icon/delete_xuanze.png" onclick="removeHtml(1)" /></label>
            <input id="user_birthday" class="time_input right_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入选项" value="" >
            </div>
            <div class="mui-input-row " id="item2">
            <label class="base_grey"><img class="width_20" id="type_img" src="../../icon/delete_xuanze.png" onclick="removeHtml(2)" /></label>
            <input id="qqnumber" class="right_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入选项" >
            </div>
            <div class="mui-input-row" id="item3">
            <label class="base_grey"><img class="width_20" id="type_img" src="../../icon/delete_xuanze.png" onclick="removeHtml(3)"/></label>
            <input id="phonenumber" class="right_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入选项" >
            </div>
            </div>
            <div class="mui-input-row" id="add_item1" onclick="addItem(1)">
            <label class="base_grey"><img class="width_20" id="type_img" src="../../icon/add_xuanze.png"/></label>
            <span class="right_aligned_input font16 " style="padding: 10px 0px;" >添加选项</span>
            </div>
            </form>-->
            <!--</div>-->
        </div>
    </div>
</div>
<div id="bottom_bar" class="course_select_footer " style="padding-top: 6px;padding-bottom: 6px">
    <button id="next_bt" type="button" class="mui-btn-warning horcenter next_btn " onclick="NextSetUI()">
        添加下一题
    </button>
</div>
<div id="xueli" class="mui-popover mui-popover-action mui-popover-bottom">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#" typeids="1">单选题</a>
        </li>
        <li class="mui-table-view-cell">
            <a href="#" typeids="2">多选题</a>
        </li>
    </ul>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#xueli" typeids="2"><b>取消</b></a>
        </li>
    </ul>
</div>
<div id="offlineAlert" class="weui_dialog_confirm" style="display: none">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd">
            <strong class="weui_dialog_title" id="checkNum">是否放弃当前页面的内容创建？</strong>
        </div>
        <div class="weui_dialog_bd"></div>
        <div class="weui_dialog_ft">
            <a onclick="cleanCancel()" href="#" class="weui_btn_dialog default" style="color:#18b4ed">取消</a>
            <a onclick="cleanConfirm()" href="#" class="weui_btn_dialog primary" style="color:#18b4ed">确定</a>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery-weui.min.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript" src="../../script/mui.dtpicker.js"></script>
<script type="text/javascript" src="../../script/mui.picker.js"></script>
<script src="../../script/swiper-3.4.2.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/ui.js"></script>
<script type="text/javascript">
    var i = 0;
    var activeIndex = 0;
    var itemIndex = 0;
    var questionitemsArr = new Array();
    var questionArr = new Array();
    var len = 0;
    apiready = function () {
    	initHeaderUI();
        addQuestion(0);
        ItemTypePoPu();
        listenScroll();
    }

    function returnBack() {
        api.closeWin({});
    }

    //退出提示
    function backToast() {
        //			alert('ddd');
        $('#offlineAlert').show();
    }

    //确定
    function cleanConfirm() {
        $('#offlineAlert').hide();
        returnBack();
    }

    //取消
    function cleanCancel() {
        $('#offlineAlert').hide();
    }

    //得到题目数据
    function GetQuestionData(slideNumber) {
        var QuestionObj = new Object();
        //题目序号
        var questionno = '';
        //题目类型名称
        var subsecttitle = '';
        //选项对象
        var xuanzeObject = '';
        var options = new Array();
        var quesArr = new Array();
        var zimuArr = new Array();
        var lunshuContent = '';
        var form = $(".swiper-wrapper").children().eq(slideNumber).find("input[name='options[]']");
        form.each(function (i) {
            if ($(this).val()) {
                lunshuContent = form.eq(i).val();
                quesArr[i] = lunshuContent;
                zimuArr.push(fromCharCode(i + 1).toString())
            }
        });
        for (var i = 0; i < quesArr.length; i++) {
            options.push({
                id: zimuArr[i],
                desc: quesArr[i],
            });
        }
        QuestionObj.questionno = parseInt($(".swiper-wrapper").children().eq(slideNumber).attr('questionno')) + 1;
        QuestionObj.subsecttitle = $(".swiper-wrapper").children().eq(slideNumber).find('#item_type' + (slideNumber + 1)).html();
        QuestionObj.type = strReturnResearchType($(".swiper-wrapper").children().eq(slideNumber).find('#item_type' + (slideNumber + 1)).html());
        QuestionObj.titile = $(".swiper-wrapper").children().eq(slideNumber).find('input').eq(0).val();
        QuestionObj.question_type = str2ReturnResearchType($(".swiper-wrapper").children().eq(slideNumber).find('#item_type' + (slideNumber + 1)).html());
        QuestionObj.options = options;
        questionitemsArr[slideNumber] = QuestionObj;
    }

    // 滚动监听
    function listenScroll() {
        var winHeight = $(window).height();
        //获取当前页面高度
        $(window).resize(function () {
            var thisHeight = $(this).height();
            if (winHeight - thisHeight > 50) {
                //当软键盘弹出，在这里面操作
                $("#next_bt").css('display', 'none');
            } else {
                $("#next_bt").css('display', 'block');
                //当软键盘收起，在此处操作
            }
        });
    }

    //添加下一题
    function addQuestion(index) {
        var Q_index = '';
        if (api.pageParam.type == 1 || api.pageParam.type == 10 || api.pageParam.type == 2) {
            len = api.pageParam.data.length;
            Q_index = index + len;
        } else {
            Q_index = index;
        }
        $(".swiper-wrapper").append('<div class="swiper-slide" id="slide' + (index + 1) + '" onclick="GetQuestionData(' + index + ')"  questionno="' + Q_index + '">' + '<div class="head-div">' + '<div class="mui-input-row " style="background: #FFF;" onclick="StartPopu()">' + '<label class="jiantoudiv" id="item_type' + (index + 1) + '">单选题</label>' + '<div style="float: right;padding: 10px 16px;" ><img class="width_20" id="type_img" src="../../icon/jiantouxia.png"/>' + '</div>' + '</div>' + '</div>' + '<form class="mui-input-group" style="background: #F0F0F0" id="question_div">' + '<div class="mui-input-row">' + '<label class="quetion_tilte" >Q' + (Q_index + 1) + ':</label>' + '<input id="" class="right_aligned_input base_content_font base_dark_grey" type="text" value="" placeholder="请输入问题"  name="question"   >' + '</div>' + '<div id="item_div' + (index + 1) + '" class="addDiv">' + '<div class="mui-input-row " id="item1">' + '<label class="base_grey"><img class="width_20  removeLink" id="type_img" src="../../icon/delete_xuanze.png" onclick="removeHtml(' + (index + 1) + ',this)" /></label>' + '<input name="options[]" class="time_input right_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入选项" value="" Itemindex="1">' + '</div>' + '<div class="mui-input-row " id="item2">' + '<label class="base_grey"><img class="width_20 removeLink" id="type_img" src="../../icon/delete_xuanze.png" onclick="removeHtml(' + (index + 1) + ',this)" /></label>' + '<input name="options[]" class="right_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入选项" Itemindex="2">' + '</div>' + '<div class="mui-input-row" id="item3">' + '<label class="base_grey"><img class="width_20 removeLink" id="type_img" src="../../icon/delete_xuanze.png" onclick="removeHtml(' + (index + 1) + ',this)" Itemindex="3"/></label>' + '<input name="options[]" class="right_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入选项" >' + '</div>' + '</div>' + '<div class="mui-input-row" id="add_item' + (index + 1) + '" onclick="addItem(' + (index + 1) + ',this)">' + '<label class="base_grey"><img class="width_20" id="type_img" src="../../icon/add_xuanze.png"/></label>' + '<span class="right_aligned_input font16 " style="padding: 10px 0px;" >添加选项</span>' + '</div>' + '</form>' + '</div>')
    }

    //添加下个选项
    //添加下个选项
    function addItem(index, obj) {
        itemIndex = itemIndex + 1;
        //		    if(fromLen<6){
        $("#item_div" + (index)).append('<div class="mui-input-row " id="item' + (itemIndex) + '">' + '<label class="base_grey"><img class="width_20 removeLink" id="type_img" src="../../icon/delete_xuanze.png" onclick="removeHtml(' + index + ',this)"/></label>' + '<input name="options[]" class="right_aligned_input base_content_font base_dark_grey" type="text" placeholder="请输入选项" Itemindex="' + itemIndex + '">' + '</div>');


        var fromLen = $(".swiper-wrapper").children().eq(activeIndex).find("input[name='options[]']").length;
        if (fromLen > 5) {
            obj.style.display = "none";
        }
    }

    //添加下一题的html布局
    function NextSetUI() {
        GetQuestionData(activeIndex);
        var names = $(".swiper-wrapper").children().eq(activeIndex).find('input').eq(0).val().trim();
        var options = questionitemsArr[activeIndex].options;
        var fromLen =$(".swiper-wrapper").children().eq(activeIndex).find("input[name='options[]']").length;
        if (names == "" || names == undefined || isOnlySpaceOrEnter(names)) {
            alert('请输入问题');
            return false;
        }
        var items = ArrNullText(options);
        if (items.length) {
            alert('选项不可为空！');
            return false;
        }
        if (options == "") {
            alert('问题选项不能为空');
            return false;
        }
        //			if (options.length < 2) {
        //				alert('当前问题至少需要设置两个不同的选项');
        //				return false;
        //			}
        //			if (options.length > 6) {
        //				alert('最多只能设置6个选项');
        //				return false;
        //			}
        if (options.length < fromLen) {
            alert('选项不可为空');
            return false;
        }
        var same = sameNameText(options);
        if (same.length) {
            alert('选项重复，请设置不同的选项');
            return false;
        }
        addQuestion(activeIndex + 1);
        var mySwiper = new Swiper('.swiper-container', {
            autoHeight: true,
            //用户操作swiper之后，是否禁止autoplay
            autoplayDisableOnInteraction: false,
            onlyExternal: true,
            direction: 'horizontal',
            loop: false,
        })
        //				alert(activeIndex);
        mySwiper.slideTo(activeIndex + 1, 1000, false);
        activeIndex = mySwiper.activeIndex
    }

    //选择题目类型弹出
    function StartPopu() {
        mui('#xueli').popover('toggle');
    }

    //删除选项
    function removeHtml(sindex, obj) {
        var itemLen = $(obj).parents("#item_div" + (sindex)).find("input[name='options[]']").length;
        if (itemLen > 2) {
            $(obj).parents(".mui-input-row").remove();
        } else {
            alert('当前问题至少需要设置两个不同的选项');
        }
        if (itemLen < 7) {
            $("#add_item" + (sindex)).css("display", "block");
        }
    }

    //题目类型
    function ItemTypePoPu() {
        mui('body').on('tap', '.mui-popover-action li>a', function () {
            //			alert(activeIndex);
            var typeid = $(this).attr('typeids');
            if (typeid == 1) {
                mui('#xueli').popover('toggle');
                $("#item_type" + (activeIndex + 1)).text('单选题');
            } else if (typeid == 2) {//选择本科
                mui('#xueli').popover('toggle');
                $("#item_type" + (activeIndex + 1)).text('多选题');
            }
        });
    }

    //完成题目的组建
    function completeData() {

        GetQuestionData(activeIndex);
        var reg = /\s/;
        var names = $(".swiper-wrapper").children().eq(activeIndex).find('input').eq(0).val().trim();
        var options = questionitemsArr[activeIndex].options;
        var fromLen = $(".swiper-wrapper").children().eq(activeIndex).find("input[name='options[]']").length;
        if (names == "" || names == undefined || isOnlySpaceOrEnter(names)) {
            alert('请输入问题');
            return false;
        }
        var items = ArrNullText(options);
        if (items.length) {
            alert('选项不可为空！');
            return false;
        }
        if (options == "") {
            alert('问题选项不能为空');
            return false;
        }
        if (options.length < 2) {
            alert('当前问题至少需要设置两个不同的选项');
            return false;
        }
        if (options.length > 6) {
            alert('最多只能设置6个选项');
            return false;
        }
        if (options.length < fromLen) {
            alert('选项不可为空');
            return false;
        }
        var same = sameNameText(options);
        if (same.length) {
            alert('选项重复，请设置不同的选项');
            return false;
        }
        if (api.pageParam.type == 1 || api.pageParam.type == 10 || api.pageParam.type == 2) {
            questionArr = api.pageParam.data.concat(questionitemsArr);
        } else {
            questionArr = questionitemsArr;
        }
        if (api.pageParam.type == 1) {
            api.openWin({useWKWebView:true,
                name: 'Teacher_AddResearchDetailWindow',
                url: 'Teacher_AddResearchDetailWindow.html',
                pageParam: {
                    data: questionArr,
                    type: 1,
                    type1: 8,
                    classarr: api.pageParam.classarr,
                    pid: api.pageParam.pid,
                    cid: api.pageParam.cid,
                    sourceurl: api.pageParam.sourceurl,
                    sourcetitle: api.pageParam.sourcetitle
                },
                slidBackEnabled: false,
                reload: true
            });
        } else {
            api.openWin({useWKWebView:true,
                name: 'Teacher_EditResearchListDetailWin',
                url: 'Teacher_EditResearchListDetailWin.html',
                pageParam: {
                    data: questionArr,
                    type1: 11,
                    classarr: api.pageParam.classarr,
                    pid: api.pageParam.pid,
                    cid: api.pageParam.cid,
                    sourceurl: api.pageParam.sourceurl,
                    sourcetitle: api.pageParam.sourcetitle
                },
                slidBackEnabled: false,
                reload: true
            });
        }
    }
</script>
</html>
